<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../../css/aui.css" />
    <script src='../../../CommonTool/commonNetWork.js'></script>
    <script src="../../../script/jquery.js"></script>
</head>
<style>
    .downBody {
        margin-top: 2%;
    }

    .ImageInfoBody {
        height: 33vw;
        padding: 0.2rem;
        border: solid 2px rgb(245, 243, 164);
    }

    .MouseBody {
        height: 7vw;
        margin: 0 auto
    }
</style>

<body>
    <header class="aui-bar aui-bar-nav" id="aui-header">
        <div class="aui-pull-left aui-btn" onclick="close_win();">
            <span class="aui-iconfont aui-icon-left"></span>返回
        </div>
        <div class="aui-title">基础-高级-表情命名</div>
    </header>
    <div id="PickFaceOnebody">
        <div class="aui-grid downBody">
            <div class="aui-row">
                <div class="aui-col-xs-4"></div>
                <div class="aui-col-xs-4">
                    <img src="http://172.16.32.194/social/advanced/3-表情命名/test1.png" alt="" class="ImageInfoBody">
                </div>
            </div>
            <div class="aui-row">
                <div class="aui-col-xs-4"></div>
                <div class="aui-col-xs-4" id="StartRecord">
                    <img id="play_record" src="http://172.16.32.194/button/recorder_default.png" alt=""
                        class="MouseBody">
                    <p id="recordText1">点击录制</p> 
                </div>
                <div class="aui-col-xs-4" id="PlayRecord">
                    <img id="play_record" src="http://172.16.32.194/button/play.png" alt=""
                        class="MouseBody">
                        <audio id="playAudio" controls></audio>
                    <p id="recordText2">点击播放</p> 
                </div>
                <div class="aui-col-xs-4" id="StopRecord">
                    <img id="play_record" src="http://172.16.32.194/button/recorder_touching.png" alt=""
                        class="MouseBody">
                    <p id="recordText2">结束录制</p> 
                </div>
            </div>
        </div>
        <div class="footbar">
            <p class="barLeft" onclick="toggleMenu()">第一关</p>
            <p class="barCenter">
            <div id="InitialButton" style="float:left;margin-left:4%;" onclick="InitialClick()">
                <img id="passImg" src="http://172.16.32.194/commonButton/加号.png" alt="">
            </div>
            <div id="InitialButton1" style="float:left;margin-left:4%;display: none;" onclick="ShowInitialClick()">
                <img id="passImg" src="http://172.16.32.194/commonButton/减号.png" alt="">
            </div>
            <div id="InitialButton2" style="float:left; margin-left:3%;display: none;">
                <audio src="http://172.16.32.194/promptsound/他怎么了？.mp3" id="audioBody" controls
                    autoplay></audio>
                <img style="width: 2rem;height: 1.6rem;margin-top:12%"
                    src="http://172.16.32.194/commonButton/播放2.png" alt="" onclick="ImgAudioClick()">
            </div>
            <!-- <div id="InitialButton4" style="float:left;margin-left:5%;display: none;">
                <img style="width: 2rem;height:2rem;margin-top:6%"
                    src="http://172.16.32.194/commonButton/刷新1.png" alt="" onclick="ResetClick2()">
            </div> -->
            <div id="InitialButton4" style="float:left;margin-left:7%;display: none;">
                <audio src="http://172.16.32.194/social/advanced/3-表情命名/他很好奇.mp3" id="audioExpression" controls></audio>
                <img style="width: 1.6rem;height:1.5rem;margin-top:18%"
                    src="http://172.16.32.194/commonButton/media1.png" alt="" onclick="audioExpressionClick()">
            </div>
            </p>
            <p class="barright">
                <img src="../../../image/next2.png" alt="" class="BarBottom"
                    onclick="go_forward();">
            </p>
            <p class="barright">
                <img style="width: 3.5rem;height: 1.5rem;margin-top:6%"
                    src="../../../image/pass1.png" onclick="passclick();">
            </p>
        </div>
    </div>
    <!-- 通过 -->
    <div class="backdrop_bg" id="backdropPass">
        <audio src="http://172.16.32.194/commonButton/鼓掌音效.mp3" id="audioBodyPass"></audio>
        <div class="backdrop_contentPasseGif">
        </div>
    </div>
        <!-- <div class="menu" id="menu">
            <div class="menu-item" onclick="goto_page(1)">第一关</div>
            <div class="menu-item" onclick="goto_page(2)">第二关</div>
            <div class="menu-item" onclick="goto_page(3)">第三关</div>
            <div class="menu-item" onclick="goto_page(4)">第四关</div>
            <div class="menu-item" onclick="goto_page(5)">第五关</div>
        </div> -->
    </body>
</html>
<script src="./ExpressionNaming.js"></script>
<script>
    var token = ''
    var userid = ''
    var currentTimestamp = ''
    var operationName = ''
    var additionalInfo = ''
    var groupId = ''
    var scene = '基础'
    var sceneLevel = '高级'
    var courseType = '表情命名'
    var classSort = '1'
    var moodType='好奇'
    var remarks = ''
    var classType = "泛化";
    var tag
    var recordStatus = 0;
    var audiostreamer
    var record
    var fsName
    var path
    var ftpRequestTest
    var voiecUrl = '';
    var filePath = ''
    var mediaRecorder;
    var chunks = [];
    var blob;
    var videoStream;
    apiready = function () {
        document.getElementById('audioBody').style.display = 'none'
        document.getElementById('audioExpression').style.display = 'none'
        document.getElementById('PlayRecord').style.display='none'
        document.getElementById('StopRecord').style.display='none'
        document.getElementById('playAudio').style.display='none'
        var audiostreamer = api.require('audioStreamer');  //播放的时候会用到
        fsName = api.require('fs');
        record = api.require("audioRecorder"); //录制按钮
        ftpRequestTest = api.require('ftpRequest');
        ftpRequestTest = api.require('ftpRequest');
        token = api.pageParam.token
        userid = api.pageParam.uid

        currentTimestamp = Date.now()
        operationName = 'ing'
        additionalInfo = ''
        if (api.pageParam.groupId !== undefined) {
                groupId = api.pageParam.groupId;
            } else {
                InitializeCommonNetWork();
            }
        };
    function passclick() {
        document.getElementById('backdropPass').style.display = 'block'
        document.getElementById('audioBodyPass').play()
        setTimeout(() => {
            document.querySelectorAll("audio").forEach((audio) => audio.pause());
            api.openWin({
                name: 'test2',
                url: './test2.html',
                pageParam: {
                    uid: userid,
                    token: token,
                    groupId: groupId
                },
                reload: true,
            })
        }, 2000)
        currentTimestamp = Date.now()
        operationName = 'ing'
        additionalInfo = 'right'
        CommonNetWork()
    }
    function go_forward(data) {
        document.querySelectorAll("audio").forEach((audio) => audio.pause());
        currentTimestamp = Date.now()
        operationName = 'end'
        additionalInfo = ''
        CommonNetWork()
        api.openWin({
            name: 'test2',
            url: './test2.html',
            pageParam: {
                uid: userid,
                token: token,
                groupId: groupId
            },
            reload: true,
        })
    }
    function ResetClick2() {
            api.openWin({
                name: "test1",
                url: "./test1.html",
                pageParam: {
                    uid: userid,
                    token: token,
                    groupId: groupId,
                },
                reload: true,
                animation: { 
            type: "none", // 禁用动画类型
            duration: 0   // 动画时长设为0
        },
            });
        }

    function goto_page(number) {
        const pages = [
                "test1",
                "test2",
                "test3",
                "test4",
                "test5",
        ];

        var name = pages[number - 1];
        var url = "./" + name + ".html";

        document.querySelectorAll("audio").forEach((audio) => audio.pause());

        currentTimestamp = Date.now();
        operationName = "end";
        additionalInfo = "";
        CommonNetWork();
        api.openWin({
            name: name,
            url: url,
            pageParam: {
                uid: userid,
                token: token,
                groupId: groupId,
            },
            reload: true,
        });
    }
    function toggleMenu() {
        var menu = document.getElementById("menu");
        if (menu.style.display === "none" || menu.style.display === "") {
            menu.style.display = "block";
        } else {
            menu.style.display = "none";
        }
    }
</script>